<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-12-20 18:40:19
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-12-24 22:39:11
 * @FilePath: /tuberculosis_screening_display_system/src/views/Analysis.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="grid column_2 gap_default full" ref="domRef">
    <div class="grid-item">
      <ScheduleChart
        v-if="height"
        class="card full"
        :height="height"
        title="人群筛查进度"
         subTitle="(%)"
        :data="schedules"
        :legend="[
          {
            label: '筛查总人数',
            key: 'rate',
          },
        ]"
        label="type"
      ></ScheduleChart>
    </div>
    <div class="grid-item">
      <FlowChart
        v-if="height"
        class="card full"
        :height="height"
        title="筛查流程"
         subTitle=""
        :data="flows"
        :legend="[
          {
            label: '筛查总人数',
            key: 'num',
          },
        ]"
        label="type"
      >
      </FlowChart>
    </div>
    <div class="grid-item">
      <StackedChart
        v-if="height"
        class="card full"
        :height="height"
        title="不同诊断类型"
        subTitle="(123)"
        :data="types"
        :legend="[
          {
            label: '临床诊断数',
            key: 'diagnose',
          },
          {
            label: '确诊病例数',
            key: 'confirmed',
          },
        ]"
        label="type"
      ></StackedChart>
    </div>
    <div class="grid-item">
      <StackedChart
        v-if="height"
        class="card full"
        :height="height"
        title="病例统计图"
        subTitle="(567)"
        :data="months"
        :legend="[
          {
            label: '临床诊断数',
            key: 'diagnose',
          },
          {
            label: '确诊病例数',
            key: 'confirmed',
          },
        ]"
        label="month"
      ></StackedChart>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue';
import { getSchedule, getFlow, getTypes, getMonths } from '@/api/global.api';
import StackedChart from '@/components/StackedChart';
import FlowChart from '@/components/FlowChart';
import ScheduleChart from '@/components/ScheduleChart';
export default defineComponent({
  components: {
    ScheduleChart,
    FlowChart,
    StackedChart,
  },
  setup() {
    const types = ref([]);
    const months = ref([]);
    const schedules = ref([]);
    const flows = ref([]);
    async function getData() {
      schedules.value = await getSchedule();
      flows.value = await getFlow();
      types.value = await getTypes();
      months.value = await getMonths();
    }

    onMounted(() => {
      getData();
    });

    const domRef = ref();
    const height = ref();
    watch(domRef, dom => {
      height.value = dom.offsetHeight / 2 - 8 * 2 - 8;
    });

    return {
      types,
      months,
      schedules,
      flows,
      domRef,
      height,
    };
  },
});
</script>

<style lang="scss" scoped>
.grid-item {
  height: calc(100% / 2);
}

// .card {
//   height: calc(100% / 2);
// }
</style>

